<style lang="less">

    .yy-select-view {
        background: #f5f5f5;
        .mint-tab-item {
            color:#262626;
        }
        .tip {
            padding:0 14px;
            line-height: 30px;
            height: 30px;
            font-size: 13px;
            color: #9E9E9E;
            background-color: #F5F5F5;
        }
        .gap {
            margin:0 10px 0 20px;
            display: inline-block;
            height: 30px;
            line-height: 30px;
        }
        .page-navbar{
            margin-top: 10px;
        }
        .select-top {
            padding:10px 14px;
            background: #fff;
            color:#262626;
        }
        .select-top .iconfont{
            color: #29B6F6;
        }

        .btn-select {
            width:60px;
            height:28px;
            line-height: 28px;
            border-radius: 3px;
            border:1px solid #29B6F6;
            color:#29B6F6;
            background: #fff;
            padding:0;
            font-size:13px;
            outline:none;

        }
        .date-picker {
            position: relative;
            display: inline-block;
            width:100px;
            height:30px;
            line-height: 30px;
            border:none;
            text-align: center;
            input {
                width:90px;
                border:none;
                outline: none;
                font-size:15px;
            }
            i {
                position: absolute;
                right:-5px;
                top:0;
                color:#81C684;
                font-size:10px;
                transform: scale(.5);
            }
        }
    .picker-toolbar {
        background-color: #F7F7F7;
    }
    .mint-datetime-cancel {
        float: none;
        color: #2F3942;
        padding-left: 5px
    }
    .mint-datetime-confirm {
        float: none;
        color: #F7595E;
        position: absolute;
        right: 5px;
    }
    .mint-datetime-action {
        width: 60px;
    }
    .btn-date {
        width:70px;
        height:30px;
        border:none;
        outline: 0;
        border-radius: 15px;
        color:#9E9E9E;
        background: #f5f5f5;
        border:1px solid #EDEDED;
    &.active {
         background:#29B6F6;
         border:1px solid #29B6F6;
         color:#fff;
     }
    }

    .space {
        justify-content: space-between;
    }
    }
</style>
<template>
    <div class="yy-select-view">
            <div class="select-top flex-layout space">
                <button class="btn-date" :class="{active:(1===currentIndex)}" @click="toggleBtn(1)">本周</button>
                <button class="btn-date" :class="{active:(2===currentIndex)}" @click="toggleBtn(2)">上周</button>
                <button class="btn-date" :class="{active:(3===currentIndex)}" @click="toggleBtn(3)">本月</button>
                <button class="btn-date" :class="{active:(4===currentIndex)}" @click="toggleBtn(4)">更多</button>
            </div>
            <div class="select-top flex-layout" v-if="isShowMore">
                <div class="date-picker" @click="openStart">
                    <input type="text" v-model="showStart" readonly >
                    <i class="iconfont icon-sanjiao"></i>
                </div>
                <span class="gap">至</span>
                <div class="date-picker" @click="openEnd">
                    <input type="text" v-model="showEnd" readonly>
                    <i class="iconfont icon-sanjiao"></i>
                </div>
                <div class="flex"></div>
                <button class="btn-select" @click="select">查询</button>
            </div>
        <div class="page-navbar">

            <ysNavbar @changePer = 'changePer' @changeTeam = 'changeTeam' :hasDept="hasDept" ></ysNavbar>

            <div v-show="isPerson">
                <div class="tip">当前时间段内个人步数总和</div>
                <ysselectperson class="yousport-percell" :perUrl="perListUrl" :isShow="isPerson" ></ysselectperson>
            </div>

            <div v-show="isTeam">
                <div class="tip">当前时间段内部门平均步数总和</div>
                <ysselectcell :teamUrl="teamListUrl" :isShow="isTeam"></ysselectcell>
            </div>

        </div>
        <mt-datetime-picker
                ref="end"
                type="date"
                v-model="endDate"
                @confirm="handleEnd">
        </mt-datetime-picker>
        <mt-datetime-picker
                ref="start"
                type="date"
                @confirm="handleStart"
                v-model="startDate"
        >
        </mt-datetime-picker>

    </div>
</template>

<script>
    import util from '../assets/util'
    import ysselectperson from '../component/ys-selectperson.vue'
    import ysselectcell from '../component/ys-selectcell.vue'
    import ysNavbar from '../component/ys-navbar.vue'
    import config from '../assets/config.js'
    import { Toast } from 'mint-ui';
    import bridge from '../bridge'

    export default {


        data() {
            return {
                perListUrl:config.host + config.searchPerson,
                teamListUrl:config.host + config.searchDep,
                isPerson:true,
                isTeam:false,
                startDate:'',
                endDate:'',
                currentIndex:1,
                isShowMore:false,
                hasDept:util.session.get('sport-has-dept')
            };
        },
        activated(){
            this.initHeader();
            this.resumeScroll();
        },
        created() {
            var now = new Date();
            var day = now.getDay();
            this.endDate = now;
            this.startDate = new Date(now.getTime() - 24*60*60*1000* (day-1));
        },
        mounted() {
            this.$eventBus.$emit('select', {
                date1:this.showStart,
                date2:this.showEnd
            });
        },
        beforeRouteLeave(to, from, next){
            var scrollTop = document.querySelector('.page-infinite-wrapper').scrollTop;
            util.session.set('select-view-scroll', scrollTop);
            next();
        },
        computed:{
            showStart() {
                return util.formatDate(this.startDate, '-');
            },
            showEnd(){
                return util.formatDate(this.endDate, '-');
            }
        },
        methods:{
            resumeScroll() {
                var scrollTop = util.session.get('select-view-scroll');
                if(scrollTop) {
                    document.querySelector('.page-infinite-wrapper').scrollTop = scrollTop;
                }

            },
            initHeader(){
                let me = this;
                bridge.client.configNavBar(function () {

                }, {centerItems:[{title:'查询'}],rightItems:[]});
            },
            toggleBtn(index){
                this.currentIndex = index;
                var now = new Date();
                var day = now.getDay();
                day = day ? day : 7;
                var year = new Date().getFullYear();
                var month = new Date().getMonth()+1;
                switch (index) {
                    //本周
                    case 1:
                            this.endDate = now;
                            this.startDate = new Date(now.getTime() - 24*60*60*1000* (day-1));
                        break;
                    //上周
                    case 2:
                            this.endDate = new Date(now.getTime() - 24*60*60*1000*day);
                            this.startDate = new Date(this.endDate.getTime()-24*60*60*1000*6);
                            console.log(this.endDate, this.startDate);
                            //this.select();
                        break;
                    //本月
                    case 3:
                            this.endDate = now;
                            this.startDate = new Date(year +'/'+month+'/'+'01');

                        break;
                    case 4:
                        break;
                }
                if(index === 4) {
                    this.isShowMore = !this.isShowMore;
                } else {
                    this.select();
                    this.isShowMore = false;
                }
            },

            select() {
                let start = this.startDate.getTime();
                let end = this.endDate.getTime();

                if(start > end) {
                    Toast({
                        message: '开始日期不能大于结束日期'

                    });
                } else if(end > new Date().getTime()){
                    Toast({
                        message:'结束日期不能大于当前日期'
                    })
                } else {
                    this.$eventBus.$emit('select', {
                        date1:this.showStart,
                        date2:this.showEnd
                    });
                }
            },
            openStart(){
                this.$refs.start.open();
            },
            openEnd() {
                this.$refs.end.open();
            },
            changePer(){
                if(this.isPerson === true) {
                    return;
                }else {
                    this.isPerson = !this.isPerson;
                    this.isTeam = !this.isTeam;
                }
            },
            changeTeam(){
                if(this.isTeam === true) {
                    return;
                }else {
                    this.isPerson = !this.isPerson;
                    this.isTeam = !this.isTeam;
                }
            }
        },
        components:{
            ysselectperson , ysselectcell , ysNavbar, util
        }
    };
</script>

